<template>
  <view class="con">
    
    <!-- 头部 -->
    <view class="topWrap">
      <view :style="{marginTop: systemBarHeight + 'px'}"></view>
      <view class="topssss">
        <image class="topssss_img" @click="fanuiBtn" mode="widthFix" src="/static/index/img29.png"></image>
        <view>我要互单</view>
      </view>
      <!-- 头部 -->
      <view class="guanc">
        <view class="guancC">
          <view class="guancCli flex flex_between">
            <view class="guancCliz flex">
              <image class="guancCliz_img" mode="widthFix" :src="peopleInfoPre.head"></image>
              <view class="guancCliz_v">
                <view class="guancCliz_v1">{{peopleInfoPre.nikename}}</view>
                <view class="guancCliz_v2">{{peopleInfoPre.nicknum}}</view>
              </view>
            </view>
            <view class="guancCliz_y flex">
              <view class="guancCliz_y1">{{peopleInfoPre.xian_min}}<text>min</text></view>
              <view class="guancCliz_y2">闲鱼互单<text>{{peopleInfoPre.xian_num}}</text>产品</view>
            </view>
          </view>
        </view>
      </view>
    </view>
   
    <!-- 下面内容 -->
    <view class="xiam">
      <view class="xiam_1 flex flex_between" v-for="(item,index) in myPeopleList" @click="goHuDan2(item)">
        <!-- 左边 -->
        <view class="xiam_1z">
          <view class="xiam_1z1">{{item.title}}</view>
          <view class="xiam_1z3">
            <view class="xiam_1z3_v1">剩余{{item.kc}}次</view>
            <view class="xiam_1z3_v2"><text :style="{width:(Number(item.kc0)-Number(item.kc))/Number(item.kc0)*100+'%'}"></text></view>
          </view>
        </view>
        <!-- 右边 -->
        <view class="xiam_1y">
          <image class="xiam_1y_img" mode="widthFix" :src="item.pic"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    xianXianPeople //会员的互单内容
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        // openid:'oycWz5flB9yZkf6Uw65uq-xzA0mA',
        userInfo:uni.getStorageSync('userInfo'),//获取我的信息
        systemBarHeight: 0,
        peopleId:'',//用户ID(闲鱼宝藏里的ID)
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
        peopleInfoPre:{}, //前一个页面传过来的用户信息
        myPeopleInfo:{}, //信息
        myPeopleList:[] //列表
      };
    },
    onLoad(options) {
      console.log('前一个页面的参数')
      console.log(options)
      console.log(JSON.parse(options.peopleInfo))
      this.peopleInfoPre = JSON.parse(options.peopleInfo)
      this.peopleId = this.peopleInfoPre.id
      this.getStatusBarHeight();
      this.userInfo = uni.getStorageSync('userInfo')
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    onShow() {
      console.log('再次请求')
      this.page = 1
      this.myPeopleList = []
      this.getXianPeopleFun()
    },
    methods: {
      getStatusBarHeight() {
        uni.getSystemInfo({
            success: res => {
              console.log(res.statusBarHeight)
              this.systemBarHeight = res.statusBarHeight;
              console.log('是多少')
              console.log(this.systemBarHeight)
              const systemInfo = uni.getSystemInfoSync()
              if (systemInfo.osName === 'ios'){
                console.log('是苹果机')
              }
              if (systemInfo.osName === 'android'){
                console.log('是安卓机')
                this.systemBarHeight = res.statusBarHeight + 4;
              }
            }
          });
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getXianPeopleFun() 
      },
      // 会员的互单内容
      getXianPeopleFun(){
		let that = this
        let param = {
          openid:this.openid,
          people:this.peopleId,
          page:this.page
        }
        console.log('会员的互单内容')
        console.log(param)
        xianXianPeople(param).then(res=>{
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          this.myPeopleInfo = res.data
          let listRe = res.data.arrList
          if(listRe.length>0){
            that.myPeopleList = that.myPeopleList.concat(listRe);
          }
        })
      },
      // 点击进入"我要互单"
      goHuDan2(info){
        // 如果是自己的就不能进入页面--给提示"不能与自己互单哦"
        console.log('显示信息--')
        console.log(this.peopleInfoPre)
        console.log('显示缓存的用户信息--')
        console.log(this.userInfo)
        if(this.peopleInfoPre.id===this.userInfo.id){
          uni.showToast({
            icon:'none',
            title:"不能与自己互单哦"
          })
        }else{
          uni.navigateTo({
            url:'/packageA/index/woYaoHuiDanDe?info='+JSON.stringify(info)+'&&peopleInfo='+JSON.stringify(this.peopleInfoPre)
          });
        }
        
      },
      fanuiBtn(){
        uni.navigateBack({
          delta: 1
        });
      }
    },
    
  }
</script>

<style scoped lang="scss">
  page{
    padding: 0;
    margin: 0;
    background-color: rgba(238,238,238,1);
  }
  .con{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .topWrap{
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    // background:rgba(249,191,65,1);
    color: rgba(16,16,16,1);
    padding: 20rpx;
    box-sizing: border-box;
    padding-bottom: 0;
    .top{
      width: 100%;
      height: auto;
      .topz{
        width:440rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        color: rgba(136,136,136,1);
        font-size: 28rpx;
        padding: 0 34rpx;
        box-sizing: border-box;
        .topz_ipu{
          color: #F9BF41;
        }
        .topz_img{
          width: 48rpx;
          height: auto;
        }
      }
      .topy{
        width: 242rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        justify-content: center;
        .topyimg{
          width: 38rpx;
          height: auto;
        }
        .topy_t{
          color: rgba(249,191,65,1);
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
    }
    .top2{
      background-color: rgba(255,255,255,1);
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      margin-top: 50rpx;
      padding: 30rpx 50rpx;
      box-sizing: border-box;
      .top2li{
        width: 190rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
        text-align: center;
        line-height: 90rpx;
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        font-weight: bold;
        position: relative;
        .top2lic_te{
          position: absolute;
          width: 48rpx;
          height: 24rpx;
          border-radius: 100rpx;
          background-color: rgba(216,30,6,1);
          text-align: center;
          line-height: 24rpx;
          top:0;
          right: 0;
          color: rgba(255,255,255,1);
          font-size: 24rpx;
        }
      }
    }
    .top3{
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: auto;
      margin-top: 54rpx;
      margin-bottom: 42rpx;
      word-break: break-all;
      text{
        word-break: break-all;
      }
      .top3_t1{
        color: #D81E06;
        font-weight: bold;
        margin-right: 15rpx;
        font-size: 24rpx;
      }
      .top3_t2{
        font-size: 24rpx;
      }
    }
  }
  .topssss{
    margin-bottom: 0;
  }
  .guanc{
    width: 100%;
    height: auto;
    padding: 0;
    padding-top: 30rpx;
    padding-bottom: 0;
    box-sizing: border-box;
     // background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    .guancT{
      margin: 0 30rpx;
      color: rgba(0,0,0,1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }
    .guancC{
      width: 100%;
      height: auto;
      .guancCli{
        width: 100%;
        height: auto;
        height: 80px;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }
      .guancCliz{
        width: 40%;
        .guancCliz_img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          margin-right: 20rpx;
        }
        .guancCliz_v{
          width: 155rpx;
        }
        .guancCliz_v1{
          line-height: 40rpx;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
        }
        .guancCliz_v2{
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }
    .guancCliz_y{
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;
      // background: #f00;
      .guancCliz_y1{
        width: 160rpx;
        height: 80rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(255,246,228,1) 100%);
        text-indent: 20rpx;
        color: rgba(249,191,65,1);
        font-size: 28rpx;
        line-height: 80rpx;
        font-style: italic;
      }
      .guancCliz_y2{
        width: 230rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
        font-size: 28rpx;
        line-height: 62rpx;
        position:relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0,0,0,1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;
        text{
          color: rgba(216,30,6,1);
          font-size: 48rpx;
          
        }
      }
    }
    
  }
input::placeholder{
    color: #F9BF41;
  }
  .xiam{
    padding:0 20rpx;
    width: 100%;
    height: auto;
    box-sizing: border-box;
	padding-bottom: 20rpx;
    .xiam_1{
      width: 100%;
      height: auto;
      padding: 30rpx;
      border-radius: 20rpx;
      background-color: rgba(255,255,255,1);
      box-sizing: border-box;
      margin-bottom: 20rpx;
      .xiam_1z{
        width: 420rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .xiam_1z1{
          width: 100%;
          line-height: 40rpx;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
          margin-bottom: 12rpx;
        }
        .xiam_1z2{
          width: 180rpx;
          height: 44rpx;
          border-radius: 100rpx;
          background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
          justify-content: center;
          .xiam_1z2_img{
            width: 32rpx;
            height: auto;
          }
          .xiam_1z2_c{
            color: rgba(0,0,0,1);
            font-size: 24rpx;
          }
        }
        .xiam_1z3{
          width: 100%;
          .xiam_1z3_v1{
            line-height: 34rpx;
            color: rgba(137,137,137,1);
            font-size: 24rpx;
            margin-bottom: 8rpx;
          }
          .xiam_1z3_v2{
            width: 100%;
            height: 16rpx;
            border-radius: 20rpx;
            background-color: rgba(232,230,230,1);
            position: relative;
            text{
              display: inline-block;
              border-radius: 20rpx;
              // background-color: rgba(249,191,65,1);
              background: linear-gradient( to right, #f9bf41, #fff6e4);
              width: 120rpx;
              height: 16rpx;
              position: absolute;
              left: 0;
              top:0;
            }
          }
        }
      }
      .xiam_1y{
        width:200rpx;
        height: 200rpx;
        overflow: hidden;
        border-radius: 20rpx;
        .xiam_1y_img{
          width: 200rpx;
          height: 200rpx;
        }
      }
    }
  }
</style>